<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>接口内容</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/component/pear/css/module/newtable.css"/>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
</head>
<style>
    .layui-card {
        padding: 15px;
        margin-bottom: 15px
    }
</style>
<body class="pear-container">
<div class="site-content">
    <div class="layui-card" id="view_tpl1"></div>
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="doc">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="detail">接口详情</li>
                <li lay-id="debug">在线调试</li>
                <li lay-id="wddebug">文档明细</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div id="view_tpl2">
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div id="view_tpl3"></div>
                    <div class="callback"></div>
                </div>

                <div class="layui-tab-item">
                    <div id="view_tpl5"></div>
                    <div class="callback"></div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/html" id="tpl1">

        <div class="layui-card-header" style="font-size: 16px">
            {{ d.title }}
            <div style="float:right" onclick="adddesc({:input(" modeid
            ")},{:input("listid")})"><i class="layui-icon layui-icon-add-1" id="Tree_Add" style="cursor:pointer"
                                        title="新增接口介绍"></i></div>
        </div>
        <div class="layui-card-body">
            {{ d.desc}}
        </div>

    </script>
    <script type="text/html" id="tpl5">
        {{ d.descmx}}
    </script>


    <script type="text/html" id="tpl2">
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col>
            </colgroup>
            <tbody>
            <tr>
                <td>接口地址</td>
                <td>
                    {{ d.url }}
                </td>
            </tr>
            <tr>
                <td>后台方法</td>
                <td>{{ d.href }}</td>
            </tr>
            <tr>
                <td>请求方式</td>
                <td>{{ d.method ? d.method : '-' }}</td>
            </tr>
            <tr>
                <td>接口版本</td>
                <td>{{ d.version ? d.version : '-' }}</td>
            </tr>
            <tr>
                <td>开发人员</td>
                <td>{{ d.author ? d.author : '-' }}</td>
            </tr>
            <tr>
                <td>开发时间</td>
                <td>{{ d.author_time ? d.author_time : '-' }}</td>
            </tr>


            {{# if(d.param){ }}
            <tr>
                <td>请求参数</td>
                <td>
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>控件类型</th>
                            <th>字段类型</th>
                            <th>是否必填</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{# layui.each(d.param,function(k,v){ }}
                        <tr>
                            <td>{{ v.fileds_form_num }}</td>
                            <td>{{ v.fileds_type }}</td>
                            <td>{{ v.rn_field_type }}</td>
                            <td>{{ v.required }}</td>
                            <td>{{ v.fileds_name }}</td>
                        </tr>
                        {{# }); }}
                        </tbody>

                    </table>
                </td>
            </tr>
            {{# } }}

            {{# if(d.return){ }}
            <tr>
                <td>响应参数</td>
                <td>
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>

                            <th>名称</th>
                            <th>类型</th>
                            <th>默认值</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{# layui.each(d.return,function(k,v){ }}
                        <tr>
                            <td>{{ v.name }}</td>
                            <td>{{ v.type }}</td>
                            <td>{{ v.default }}</td>
                            <td>{{ v.desc }}</td>
                        </tr>
                        {{# }); }}
                        </tbody>
                    </table>
                </td>
            </tr>
            {{# } }}
            </tbody>
        </table>
    </script>
    <script type="text/html" id="tpl3">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">接口地址</label>
                <div class="layui-input-block">
                    {{# if(d.method == 'api'){ }}
                    <input type="url" name="url" required readonly="readonly"
                           autocomplete="off" class="layui-input"
                           value="{{ d.href ? d.href : ''}}">
                    {{# }else{ }}
                    <input type="url" name="url" required lay-verify="url" placeholder="请输入接口地址"
                           autocomplete="off" class="layui-input"
                           value="{{ d.url ? d.url : ''}}">
                    {{# } }}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请求方式</label>
                <div class="layui-input-inline">
                    <select name="method" lay-verify="required">

                        <option value="POST" selected}}>POST</option>

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请求头部</label>
                <div class="layui-input-block">

                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>参数</th>
                            <th>参数值</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>

                        {{# layui.each(d.header,function(index,item){ }}
                        <tr>
                            <td><input name="header[name][]" type="text" class="layui-input" value="{{ item.name }}">
                            </td>
                            <td><input name="header[value][]" lay-verify="required" type="text" class="layui-input"
                                       value="{{ item.value }}"></td>
                            <th>{{ item.desc }}
                            </th>
                        </tr>
                        {{# }); }}

                        </tbody>
                    </table>


                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请求参数</label>
                <div class="layui-input-block">

                    <table class="layui-table">
                        <colgroup>
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>参数</th>
                            <th>参数值</th>
                            <th>是否必填</th>
                            <th>参数说明</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>


                        {{# if(d.param){ }}
                        {{# layui.each(d.param,function(index,item){ }}
                        <tr>
                            <td><input name="params[name][]" type="text" class="layui-input"
                                       value="{{ item.fileds_form_num }}"></td>
                            <td><input name="params[value][]" type="text" class="layui-input" value="" {{#
                                       if(item.required== "YES"){ }} lay-verify="required"{{# }; }}>
                            </td>
                            <td>{{ item.required }}</td>
                            <td>{{ item.fileds_name }}</td>
                            <td>
                                {{# if(item.required == "NO"){ }}
                                <button class="layui-btn layui-btn-danger layui-btn-xs"
                                        type="button" data-type="del">删除
                                </button>
                                {{# }; }}
                            </td>
                        </tr>

                        {{# }); }}
                        {{# } }}
                        </tbody>
                    </table>


                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="debug">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </script>

    <div class="layui-card">
        <div class="layui-card-header">温馨提示</div>
        <div class="layui-card-body">
            此文档是由系统自动生成，如发现错误或疑问请告知开发人员及时修改
        </div>
    </div>


</div>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>

    layui.use(['element', 'layer', 'form', 'code', 'rncontrol'], function () {
        var element = layui.element
            , layer = layui.layer
            , $ = layui.jquery
            , form = layui.form
            , rncontrol = layui.rncontrol;


        form.on('select(component)', function (item) {
            window.location.href = item.value;
        });

        layui.code({
            elem: 'pre' //默认值为.layui-code
            , title: 'ThinkPHP 6'
            , encode: true
            , about: false
        });

        //显示当前tab
        if (location.hash) {
            element.tabChange('doc', location.hash.replace(/^#/, ''));
        }
        element.on('tab(doc)', function () {
            var othis = $(this), layid = othis.attr('lay-id');
            if (layid) {
                location.hash = layid;
            }
        });

    });
</script>

<script>
    layui.use(['laytpl', 'jquery'], function () {
        var laytpl = layui.laytpl
            , $ = layui.jquery;


        $.post(window.location.href, function (response) {
            if (response.code == 0) {
                render(tpl1.innerHTML, 'view_tpl1', response.data);
                render(tpl2.innerHTML, 'view_tpl2', response.data);
                render(tpl3.innerHTML, 'view_tpl3', response.data);
                render(tpl5.innerHTML, 'view_tpl5', response.data);
            }
        });

        function render(tpl, _view, data) {
            var view = document.getElementById(_view);
            laytpl(tpl).render(data, function (html) {
                view.innerHTML = html;
                layui.form.render();
            })

        }

        $('body').delegate('button', 'click', function () {
            var type = $(this).data('type');
            action[type] && action[type].call($(this));
        });


        // 格式化对象输出
        function writeHtml(obj) {
            var objStr = JSON.stringify(obj, null, 4);
            console.log(objStr)
            var html = objStr.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp');
            return html
        }

        layui.use(['form', 'layer'], function () {
            var form = layui.form
                , layer = layui.layer;
            form.on('submit(debug)', function (data) {
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                $.ajax({
                    url: "/admin/Rndoc/DocPost/",
                    type: 'POST',
                    data: data.field,
                    success: function (response) {
                        layui.layer.closeAll('loading');
                        if (response.code == 0) {
                            html = "<pre class='layui-code' lay-skin='notepad' lay-encode='true' style='margin: 0'>" + writeHtml(response) + "</pre>";
                            $(".callback").html(html);
                            return false;
                        } else {
                            layui.layer.msg('返回失败', {icon: 2});
                            return false;
                        }
                    },
                    error: function (res) {
                        layui.layer.closeAll('loading');
                        layui.layer.msg('请求失败', {icon: 2});
                        return false;
                    },
                });
                return false;
            })
        })
    });

    function adddesc(modeid, listid) {
        layui.rncontrol.RnViewOpen('接口介绍', '/admin/Rndoc/DocSave/?listid=' + listid + '&modeid=' + modeid, 0, 0);
    }

    function shuaxin() {
        window.location.reload();

    }


</script>
</body>
</html>
